<template>
  <el-dialog
    title="新增洗车机"
    :visible.sync="dialogVisible"
    width="80%"
    center
    :before-close="handleClose"
  >
    <div class="add-form flex">
      <p class="add-type">单个添加</p>
      <el-form
        :model="info"
        label-width="100px"
        class="demo-info"
        :rules="rules"
        ref="addForm"
      >
        <div class="flex">
          <el-form-item label="所属商户号:" prop="merchantNo">
            <el-select
              v-model="info.merchantNo"
              placeholder="请选择所属商户号"
              @change="merchantSelected"
              clearable
            >
              <el-option
                v-for="(item, index) in merchantNoList"
                :key="index"
                :label="item.merchant_Num"
                :value="item.merchant_Num"
              >
                <span>{{ item.merchant_Num }}</span>
              </el-option>
            </el-select>
            <div class="tips color-red">
              <i type="primary" class="el-icon-warning-outline"></i>
              请务必认真审阅商户号对应所属关系
            </div>
          </el-form-item>
          <el-form-item label="所属关系:" v-if="merchantList.length">
            <p v-if="merchantList.length === 1">
              {{ merchantList[0].store_Name }}
            </p>
            <div class="name-list" v-else>
              <div v-for="(item, index) in merchantList" :key="index">
                <div class="item">
                  <div class="item-left">{{ item.merchant_TypeName }}：</div>
                  <div>{{ item.store_Name }}</div>
                </div>
              </div>
            </div>
          </el-form-item>
        </div>

        <el-form-item label="所属洗车站:" prop="station">
          <el-select
            v-model="info.station"
            placeholder="请选择所属洗车站"
            clearable
          >
            <el-option
              v-for="(item, index) in stationList"
              :key="index"
              :label="item.station_Name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="设备类型:" prop="type">
          <el-select v-model="info.type" placeholder="请选择设备类型" clearable>
            <el-option
              v-for="(item, index) in typeList"
              :key="index"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="设备信息:">
          <div class="flex flex-wrap-w">
            <div class="pr-20 flex mb-20">
              <el-form-item prop="factor" label="厂家：">
                <el-select v-model="info.factor" placeholder="请选择厂家">
                  <el-option
                    v-for="item in factorList"
                    :key="item.id"
                    :label="item.suppliers_Name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="pr-20 flex mb-20">
              <el-form-item prop="series" label="系列：">
                <el-input
                  v-model="info.series"
                  placeholder="请填写系列"
                  maxlength="10"
                  clearable
                ></el-input>
              </el-form-item>
            </div>
            <div class="pr-20 flex mb-20">
              <el-form-item prop="model" label="型号：">
                <el-input
                  v-model="info.model"
                  placeholder="请填写型号"
                  maxlength="10"
                  clearable
                ></el-input>
              </el-form-item>
            </div>
            <div class="pr-20 flex mb-20">
              <el-form-item prop="hardwareVersion" label="版本：">
                <el-input
                  v-model="info.hardwareVersion"
                  placeholder="请填写版本"
                  maxlength="10"
                  clearable
                ></el-input>
              </el-form-item>
            </div>
          </div>
          <el-form-item label="质保：" prop="qualityAssurance">
            <el-select v-model="info.qualityAssurance" placeholder="请选择质保">
              <el-option
                v-for="item in qualityAssuranceList"
                :key="item.id"
                :label="item.name"
                :value="item.name"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form-item>
        <el-form-item label="设备编号:" prop="equipmentNo">
          <el-input type="text" v-model="info.equipmentNo"></el-input>
        </el-form-item>

        <el-form-item label="物联网卡号:" prop="lotNo">
          <el-input type="text" v-model="info.lotNo"></el-input>
        </el-form-item>
        <el-form-item label="软件版本号:" prop="softwareVersion">
          <el-input type="text" v-model="info.softwareVersion"></el-input>
        </el-form-item>
        <el-form-item label="设备价格:" prop="price">
          <el-input type="number" v-model="info.price"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('addForm')"
            >确定添加</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <!-- <div class="flex">
      <p class="add-type">批量添加</p>
      <el-form
        :model="info"
        :rules="rules"
        ref="info"
        label-width="100px"
        class="demo-info"
      >
        <el-form-item label="上传表格">
          <el-upload
            class="upload-demo"
            drag
            action="https://jsonplaceholder.typicode.com/posts/"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
            </div>
            <div class="el-upload__tip" slot="tip">
              只能上传excle文件，且不超过500kb
            </div>
          </el-upload>
          <el-input
              type="file"
              v-model="info.qimaicheNo"
              accept=".xml"
            ></el-input>
        </el-form-item>
      </el-form>
    </div> -->
    <!-- <div class="btn-wrap">
      <el-button type="primary" @click="submitForm">确定添加</el-button>
    </div> -->
  </el-dialog>
</template>
<script>
export default {
  name: "addEquipment",
  data() {
    // const vilidateStation = (rule, value, callback) => {
    //   if (value === "" && this.info.merchantNo !== "") {
    //     callback(new Error("请选择所属店铺"));
    //   }
    // };
    const vilidatePrice = (rule, value, callback) => {
      if (value == 0 || value < 0) {
        callback(new Error("设备价格须大于0元"));
      } else {
        callback();
      }
    };

    return {
      info: {
        merchantNo: "",
        station: "",
        type: "",
        factor: "",
        series: "",
        model: "",
        qualityAssurance: "",
        equipmentNo: "", //设备编号,
        price: "",
        lotNo: "",
        hardwareVersion: "",
        softwareVersion: ""
      },
      rules: {
        // station: [{ validator: vilidateStation }],
        type: [{ required: true, message: "请选择设备类型" }],
        factor: [{ required: true, message: "请选择设备厂家" }],
        series: [{ required: false, message: "请选择设备系列" }],
        model: [{ required: false, message: "请选择设备型号" }],
        qualityAssurance: [{ required: true, message: "请选择质保" }],
        equipmentNo: [{ required: true, message: "请填写设备编号" }],
        lotNo: [{ required: true, message: "请填写物联网卡号" }],
        price: [
          { required: true, message: "请填写设备价格" },
          { validator: vilidatePrice }
        ]
      },
      merchantNoList: [],
      stationList: [],
      factorList: [],
      typeList: [
        { id: "0", name: "自助洗车机" },
        { id: "1", name: "自动洗车机" }
      ],
      qualityAssuranceList: [
        { id: 0, name: "一年" },
        { id: 1, name: "两年" },
        { id: 2, name: "三年" }
      ],
      merchantList: [] //商户号所属关系列表
    };
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },

  mounted() {
    this.getStoreMerchant();
    this.getSuppliersList();
  },

  methods: {
    // 商户号列表
    getStoreMerchant() {
      this.$api.equipments
        .getStoreMerchant()
        .then(res => {
          this.merchantNoList = res.data;
        })
        .catch(err => {
          console.log(err);
        });
    },

    // 选择商户
    merchantSelected(e) {
      if (e) {
        this.info.station = "";
        this.getStationList(e);
        this.getMerchantInfo(e);
      } else {
        this.merchantList = [];
        this.info.station = "";
        this.stationList = [];
      }
    },

    // 获取商户号所属信息
    getMerchantInfo(id) {
      this.$api.equipments
        .getMerchantInfo({ merchant_num: id })
        .then(res => {
          this.merchantList = res.data;
        })
        .catch(err => {
          console.log(err);
        });
    },

    // 获取洗车站列表
    getStationList(id) {
      this.$api.equipments
        .getStation({ merchant_Num: id })
        .then(res => {
          this.stationList = res.data;
        })
        .catch(err => {
          console.log(err);
        });
    },

    // 获取自助洗车机供应商列表
    getSuppliersList() {
      this.$api.equipments
        .getMachineSuppliersList()
        .then(res => {
          this.factorList = res.data;
        })
        .catch(err => {
          console.log(err);
          this.$message.error("网络异常，请刷新重试");
        });
    },

    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.submit();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    // 新增
    async submit() {
      try {
        const res = await this.$api.equipments.addMachine({
          self_Service_Car_Wash_Machine_Suppliers_Id: this.info.factor,
          seriesName: this.info.series,
          typeName: this.info.model,
          cleanMachineType: this.type,
          warranty: this.info.qualityAssurance,
          wash_Machine_Id: this.info.equipmentNo,
          device_Cost: this.info.price,
          lotNo: this.info.lotNo,
          softwareVersion: this.info.softwareVersion,
          hardwareVersion: this.info.hardwareVersion
        });
        if (this.info.station) {
          this.bindFn(res.data);
        } else {
          this.$refs["addForm"].resetFields();
          this.merchantList = [];
          this.$emit("confirmAdd");
        }
      } catch (err) {
        console.log(err);
      }
    },

    // 提交
    bindFn(id) {
      console.log(id);
      this.$api.equipments
        .bindStation({
          self_Service_Car_Wash_Machine_Id: id,
          self_Service_Car_Wash_Station_Id: this.info.station,
          wash_Machine_Id: this.info.equipmentNo
        })
        .then(res => {
          console.log(res.data);
          this.$refs["addForm"].resetFields();
          this.merchantList = [];
          this.$emit("confirmAdd");
        })
        .catch(err => {
          console.log(err);
        });
    },

    handleClose() {
      this.$refs["addForm"].resetFields();
      this.merchantList = [];
      this.$emit("closeAdd");
    }
  }
};
</script>
<style lang="scss" scoped>
.add-form {
  // border-bottom: 2px solid #d1d1d1;
  margin-bottom: 20px;
}
.name-list {
  border: 1px solid #ccc;
  padding: 0 20px;
}
.item {
  display: flex;
}
.item-left {
  text-align: right;
  padding-right: 10px;
}

.pr-20 {
  padding-right: 20px;
}
.bg-f00 {
  background: #f00;
}
.add-type {
  width: 100px;
  line-height: 36px;
}
.btn-wrap {
  text-align: center;
}
</style>
